<script setup="">
import {onMounted, ref} from "vue"
import {Close} from "@element-plus/icons-vue"

defineProps({
  msg: {
    type: String,
    required: false,
  }
})
const dataList = ref([])
const page = ref(1)
const size = ref(20)
const total = ref(0)
const sort = ref(1)

async function getData() {
  const res = await adminGetTweet({
    "keyword": keyword.value,
    "column": "",
    "page": page.value,
    "size": size.value,
    "sort": sort.value,
    "start_time": !dateRange.value[0] ? "" : dateRange.value[0].getTime(),
    "end_time": !dateRange.value[1] ? "" : dateRange.value[1].getTime(),
  })
  total.value = res.data.total
  dataList.value = res.data.list
}

onMounted(() => {
  getData()
})

function closeAndRefresh() {
  newTweetVisible.value = false
  getData()
}

function changeTimeRange() {
  getData()
}

const dateRange = ref([])
const sortPopVisible = ref(false)
const newTweetVisible = ref(false)
const keyword = ref("")
import {Search, Plus} from "@element-plus/icons-vue"
import TweetCard from "@/components/home/TweetCard.vue";
import {adminGetTweet} from "@/request/mid_interface.js";
import NewOrEditTweet from "@/components/home/NewOrEditTweet.vue";

</script>

<template>
  <div class="flex justify-between ml-3">
    <el-dialog :destroy-on-close="true" :center="true" v-model="newTweetVisible" title="" width="800">
      <NewOrEditTweet @close="newTweetVisible=false" @refresh="closeAndRefresh"/>
    </el-dialog>
    <div class="flex items-center text-gray-500">
      <el-popover :visible="sortPopVisible" placement="bottom" :width="150" trigger="click">
        <template #reference>
          <div @click="sortPopVisible=!sortPopVisible" class="flex items-center mr-7 cursor-pointer select-none">
            <div>{{ ["", "最新", "", "最热"][sort] }}</div>
            <img class="ml-2 w-2.5 opacity-70" src="@/assets/img/arrow_down.svg" alt="">
          </div>
        </template>
        <div @click="sort=1;sortPopVisible=false;getData()"
             class="px-5 py-3 hover:bg-gray-100 transition cursor-pointer select-none rounded">最新
        </div>
        <div @click="sort=3;sortPopVisible=false;getData()"
             class="px-5 py-3 hover:bg-gray-100 transition cursor-pointer select-none rounded">最热
        </div>
      </el-popover>
      <el-date-picker
          v-model="dateRange"
          type="monthrange"
          range-separator="-"
          start-placeholder="起始时间"
          end-placeholder="终止时间"
          @change="changeTimeRange"
          clear-icon=""
      />
      <el-icon v-if="dateRange.length" @click="dateRange=[];getData()" class="ml-3 cursor-pointer">
        <Close></Close>
      </el-icon>
    </div>
    <div class="flex items-center">
      <div class="flex items-center bg-white pl-4 rounded-full">
        <el-icon color="#888">
          <Search></Search>
        </el-icon>
        <input v-model="keyword" @keydown.enter="getData" class="py-2 pr-3 pl-2 bg-transparent outline-0"
               placeholder="请输入关键字">
      </div>
      <div
          @click="getData"
          class="px-5 py-2 bg-white ml-3 rounded-full font-bold cursor-pointer select-none hover:opacity-60 transition">
        搜索
      </div>
      <div
          @click="newTweetVisible=true"
          class="px-5 py-2 bg-white ml-3 rounded-full font-bold flex items-center cursor-pointer select-none hover:opacity-60 transition"
          style="color: #E9A325">
        <el-icon class="mr-1">
          <Plus></Plus>
        </el-icon>
        新增
      </div>
    </div>
  </div>
  <div class="grid grid-cols-2 gap-3 mt-4">
    <template v-for="item in dataList">
      <TweetCard @refresh="getData" :param="item"></TweetCard>
    </template>
  </div>
  <div v-if="dataList.length===0">
    <el-empty description="没有数据"></el-empty>
  </div>
  <div class="flex justify-center mt-5">
    <el-pagination
        v-model:current-page="page"
        v-model:page-size="size"
        :hide-on-single-page="true"
        layout="prev, pager, next, jumper"
        :total="total"
        @size-change="getData"
        @current-change="getData"
    />
  </div>
</template>

<style scoped>
/deep/ .el-date-editor .el-range-separator {
  color: #bbb;
  transform: translateY(-1px);
}

/deep/ .el-date-editor .el-range__icon {
  display: none;
}

/deep/ .el-range-input {
  font-size: 14.5px;
}
</style>
